<template>
  <div class="setG">
    <el-button type="primary" @click="addG">添加竞猜赛项</el-button>
    <el-collapse v-model="activeName" accordion @change="currP=1">
      <el-collapse-item v-for="(v,i) in matchMsg.groupList" :key="i" :name="i">
        <template slot="title">
          <!-- {{v.name}} -->
          <el-select
            v-model="v.id"
            placeholder="请选择"
            :disabled="v.hasTJ"
            @change="changeG($event,i)"
          >
            <el-option v-for="item in GroupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </template>
        <el-table :data="v.memberList.slice((currP-1)*10,currP*10)" border style="width: 100%">
          <el-table-column label="姓名" align="center">
            <template slot-scope="{row}">
              <el-input v-if="row.add" clearable v-model="row.memberName"></el-input>
              <span v-else>{{row.memberName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="参赛号" align="center">
            <template slot-scope="{row}">
              <el-input v-if="row.add" clearable v-model="row.entryNumber"></el-input>
              <span v-else>{{row.entryNumber}}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别" align="center" v-if="matchMsg.gender=='T'">
            <template slot-scope="{row}">
              <el-radio-group v-model="row.sex" v-if="row.add">
                <el-radio label="M">男</el-radio>
                <el-radio label="F">女</el-radio>
              </el-radio-group>
              <span v-else>{{row.sex=='M'?'男':'女'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="poll" label="票数" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{row,$index}">
              <el-button
                type="success"
                icon="el-icon-check"
                circle
                v-if="row.add"
                @click="save(row,v)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                v-if="row.poll==0"
                @click="delPer(row.id,v.memberList,$index)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="rowB">
          <el-pagination
            :current-page.sync="currP"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="v.memberList.length"
          ></el-pagination>
        </el-row>
        <el-row class="rowB">
          <el-button type="primary" @click="addPer(v)">添加竞猜选手</el-button>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  props: {
    matchMsg: {
      type: Object,
      default: () => ({}),
    },
    GroupList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      activeName: 0, //默认展开项
      currP: 1,
    };
  },
  watch: {
    matchMsg: function (n, o) {
      if (n.groupList.length == 0) {
        this.addG();
      }
    },
  },
  methods: {
    // 删除竞猜选手
    delPer(id, list, ind) {
      this.$axios
        .get("/sbr/match/guess/delGuessMember?id=" + id)
        .then((res) => {
          let cc = res.data.code;
          if (cc == 200) {
            ind = (this.currP - 1) * 5 + ind;
            list.splice(ind, 1);
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
        });
    },
    // 添加竞猜选手
    addPer(v) {
      if (!v.id) {
        this.$message.error("请选择需要添加的赛项");
        return false;
      }
      let oo = {
        matchId: this.matchMsg.matchId,
        groupId: v.id,
        memberName: "",
        entryNumber: "",
        poll: 0,
        add: true,
        sex: "M",
      };
      v.memberList.push(oo);
      this.currP = Math.ceil(v.memberList.length / 10);
    },
    // 保存竞猜选手
    save(row, v) {
      console.log(row, v);
      if (!v.id) {
        this.$message.error("请选择需要添加的赛项");
        return false;
      }
      if (!row.memberName) {
        this.$message.error("请填写姓名");
        return false;
      }
      if (!v.hasTJ) {
        this.$axios
          .get("/sbr/match/guess/updGuessGroup?id=" + v.id)
          .then((res) => {
            v.hasTJ = true;
            // this.$message.success("添加成功");
            this.$forceUpdate();
          });
      }
      this.$axios.post("/sbr/match/guess/addGuessmember", row).then((res) => {
        row.add = false;
        this.$forceUpdate();
        this.$message.success("添加成功");
      });
    },
    // 切换赛项
    changeG(e, i) {
      let cc = this.matchMsg.groupList.filter((v) => {
        return e == v.id;
      });
      if (cc.length > 1) {
        this.$message.error("已选择该赛项");
        this.matchMsg.groupList[i].id = "";
        this.$forceUpdate();
      }
    },
    // 添加竞猜组别
    addG() {
      // console.log(1);
      let oo = {
        id: "",
        name: "",
        memberList: [],
      };
      if (this.matchMsg.groupList.length < this.GroupList.length)
        this.matchMsg.groupList.push(oo);
      else this.$message.warning("不可超过赛项个数");
    },
  },
  mounted() {
    if (this.matchMsg.groupList.length == 0) {
      this.addG();
    }
  },
};
</script>
<style scoped>
.CM {
  width: 280px;
}
.rowB {
  text-align: center;
  margin-top: 16px;
}
.setG >>> .el-collapse {
  border-color: #67c23a;
}
.setG >>> .el-collapse-item__header {
  background-color: #f0f9eb;
  color: #67c23a;
  text-indent: 20px;
  font-weight: 500;
  font-size: 22px;
  border-color: #67c23a;
}
.setG >>> .el-collapse-item__header.is-active {
  border-bottom-color: transparent;
}
.setG >>> .el-collapse-item__wrap {
  border-color: #67c23a;
}
</style>